<template>
  <div class="">
    <a-tabs v-model:activeKey="activeKey" class="user" centered size="medium" @change="selectTab">
      <a-tab-pane key="1" tab="客户信息">
        <a-card title="基本信息" style="width: 100%" v-if="nurse">
          <a-descriptions :column="3">
            <a-descriptions-item label="机构编码">{{ nurse.id }}</a-descriptions-item>
            <a-descriptions-item label="服务名称">{{ nurse.name }}</a-descriptions-item>
            <a-descriptions-item label="机构地址">{{ nurse.address }}</a-descriptions-item>
            <a-descriptions-item label="负责人">{{ nurse.chargePerson }}</a-descriptions-item>

            <a-descriptions-item label="联系方式">{{ nurse.mobile }}</a-descriptions-item>
            <a-descriptions-item label="服务时间">{{ nurse.serviceBeginTime }} -{{ nurse.serviceEndTime }}</a-descriptions-item>

            <a-descriptions-item label="机构简介">{{ nurse.detail }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="账户信息" style="width: 100%">
          <a-descriptions :column="2">
            <a-descriptions-item label="总收益">{{ nurse.sum }}</a-descriptions-item>
            <a-descriptions-item label="接单数量">{{ nurse.orderCount ? nurse.orderCount : 0 }}</a-descriptions-item>
            <a-descriptions-item label="提现金额">{{ nurse.withDrawPrice ? nurse.withDrawPrice : 0 }}</a-descriptions-item>
            <a-descriptions-item label="账号余额">{{ nurse.amount ? nurse.amount : 0 }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="资质信息" style="width: 100%">
          <a-descriptions :column="2">
            <a-descriptions-item label="机构主图">
              <img :src="nurse.title" alt="" />
            </a-descriptions-item>
            <a-descriptions-item label="详情图">
              <img :src="i" alt="" v-for="(i, ii) in details" :key="ii" />
            </a-descriptions-item>
            <a-descriptions-item label="营业执照">
              <img :src="nurse.businessLicense" alt="" />
            </a-descriptions-item>
            <a-descriptions-item label="医疗许可证">
              <img :src="nurse.licenseKey" alt="" />
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="服务范围" style="width: 100%">
          <a-descriptions :column="2">
            <a-descriptions-item label="服务城市">{{ nurse.serviceCity }}</a-descriptions-item>
            <a-descriptions-item label="服务类目">{{ nurse.serviceCategory }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="数据记录">
        <!-- 线上订单 、线下订单 -->
        <a-row style="margin: 20px 0">
          <div v-for="(item, index) in tabs" :key="item.id">
            <a-col :span="2">
              <a-tag :color="index == orderAct - 1 ? 'blue' : ''" @click="changeOrder(item.id)">{{ item.title }}</a-tag>
            </a-col>
          </div>
        </a-row>
        <a-table
          :columns="orderAct == 1 ? columns1 : columns2"
          :data-source="order"
          bordered
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #status="{ record }">
            <div>{{ orderListStatus(record.status) }}</div>
          </template>
          <!-- 
          <template #status1="{ record }">
            <div>{{ ComsumeStatus(record.status) }}</div>
          </template>
           -->
          <template #operation="{ record }">
            <a-button type="link" @click="look(record.number, record.status)">查看</a-button>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import * as api from '@/api/organ/index'
import { queryCity } from '@/api/setting/index'
import { Modal, notification, message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { UserOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { validatorPhone } from '@/assets/js/validate'
import { throttle } from '@/assets/js/debounceThrottle'
// import {
//   updateNurse,
//   selectNurseInfo,
//   selectOrderByNurseId,
//   selectAllUrgencyLinkman,
//   selectLoginRecord,
// } from "@/api/user/index";
import axios from 'axios'
import NurserOrder from '../components/NurserOrder.vue'
import { number } from 'echarts'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    const visible = ref(false)
    const formRef = ref('')
    let nurseId = ref('')

    const data = reactive({
      optionsItem: [
        { value: '母婴护理' },
        { value: '就医陪诊' },
        { value: '居家康复' },
        { value: '儿科护理' },
        { value: '中医理疗' },
        { value: '上门护理' },
        { value: '推拿按摩' },
        { value: '核酸检测' },
        { value: '检测服务' }
      ],
      nurse: {},
      loading: true,
      order: [],
      emergencyList: [],
      form: {},
      keyword: '',
      addressList: [],
      showDetail: false,
      number: '', //订单编号
      status: '',
      orderAct: 1, //1线上 2线下
      orderVisible: false, //线下订单
      orderDetail: {}, //线下订单详情
      consumeDetail: {}, //线下订单详情
      consumeVisible: false, //线下订单详情
      citys: [],
      logList: [],
      activeKey: '1',
      details: []
    })
    nurseId.value = route.query.id //护ID

    const tabs = [
      { title: '订单记录', id: 1 },
      { title: '提现记录', id: 2 }
    ]

    const rules = {
      mobile: [{ required: true, validator: validatorPhone }]
    }
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    const columnsLogin = [
      {
        title: '时间',
        dataIndex: 'loginTime',
        className: 'table',
        align: 'center'
      },
      {
        title: 'IP',
        dataIndex: 'ip',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '地区',
        dataIndex: 'address',
        className: 'table',
        align: 'center'
      },
      {
        title: '登录方式',
        dataIndex: 'loginType',
        className: 'table',
        align: 'center'
      }
    ]
    const columns1 = [
      {
        title: '订单编号',
        dataIndex: 'number',
        className: 'table',
        align: 'center'
      },
      {
        title: '用户名',
        dataIndex: 'name',
        className: 'table',
        align: 'center',
        sort: true
      },
      {
        title: '用户ID',
        dataIndex: 'userId',
        className: 'table',
        align: 'center'
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
        className: 'table',
        align: 'center'
      },
      {
        title: '订单金额',
        dataIndex: 'orderPrice',
        className: 'table',
        align: 'center'
      },
      {
        title: '应获佣金',
        dataIndex: 'price',
        className: 'table',
        align: 'center'
      },
      {
        title: '服务名称',
        dataIndex: 'serviceName',
        className: 'table',
        align: 'center'
      },
      {
        title: '下单时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center'
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        className: 'table',
        align: 'center',
        slots: {
          customRender: 'status'
        }
      },
      {
        title: '操作',
        dataIndex: 'operation',
        className: 'table',
        align: 'center',
        fixed: 'right',
        slots: {
          customRender: 'operation'
        }
      }
    ]
    const columns2 = [
      {
        title: '提现单号',
        dataIndex: 'number',
        className: 'table',
        align: 'center'
      },
      {
        title: '提现金额',
        dataIndex: 'price',
        className: 'table',
        align: 'center'
      },
      {
        title: '提现账户',
        dataIndex: 'payeeAccount',
        className: 'table',
        align: 'center'
      },
      {
        title: '提现时间',
        dataIndex: 'createdAt',
        className: 'table',
        align: 'center'
      }
    ]

    const selectTab = e => {
      console.log(e, '面板是')
      page.current = 1
      if (e == 2) {
        initLog()
      }
    }
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))

    // init
    initNurseInfo()
    async function initNurseInfo() {
      let res = await api.selectOrganByOrganId({ organId: nurseId.value })
      if (res.success) {
        data.nurse = res.object
        data.details = res.object.firstImg.split(',')
      }
    }

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      page.current = pagination.current
      page.pageSize = pagination.pageSize
      // 请求列表接口
      initLog()
    }
    const changeOrder = id => {
      data.orderAct = id
      page.current = 1
      initLog()
    }

    async function initLog() {
      let obj = {
        organId: nurseId.value,
        pageNum: page.current,
        pageSize: page.pageSize,
        type: data.orderAct
      }
      let res = await api.organDataAnalyse(obj)
      if (res.success) {
        data.order = res.object.list
      }
      data.loading = false
    }
    const look = id => {
      router.push({
        path: '/order/center/order-detail',
        query: {
          number: id
        }
      })
    }
    const orderListStatus = status => {
      let title = ''
      switch (status) {
        case 1:
          title = '待付款'
          break
        case 2:
          title = '待抢单'
          break
        case 3:
          title = '待服务'
          break
        case 4:
          title = '服务中' //服务中
          break
        case 5:
          title = '已完成'
          break
        case 6:
          title = '已取消'
          break
        case 7:
          title = '已退款'
          break
        case 8:
          title = '异常单'
          break
        case 9:
          title = '退款中' //退款中
          break
        case 10:
          title = '已拒绝' //已拒绝
          break
        default:
          break
      }
      return title
    }

    return {
      ...toRefs(data),
      pagination,
      handleTableChange,
      columns1,
      columnsLogin,
      columns2,
      visible,
      labelCol: { style: { fontWeight: 'bolder', width: '100px' } },
      formRef,
      // form,
      rules,
      value: ref([]),
      selectTab,
      tabs,
      changeOrder,
      orderListStatus,
      look
    }
  }
}
</script>
<style scoped>
img {
  width: 100px;
  height: 100px;
}
</style>
